<template>
  <view class="location" @click="chooseLocation">
    <view class="location-info">
      <text class="icon">📍</text>
      <text class="address">{{address}}</text>
      <text class="icon-right">></text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const address = ref('正在定位...')

// 获取当前位置
const getLocation = async () => {
  try {
    const [error, res] = await uni.getLocation({
      type: 'gcj02'
    })
    if (error) {
      console.error('定位失败:', error)
      address.value = '定位失败'
      return
    }
    // 使用经纬度获取详细地址
    const [err, addressRes] = await uni.request({
      url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=YOUR_KEY`,
      method: 'GET'
    })
    if (err) {
      console.error('获取地址失败:', err)
      address.value = '获取地址失败'
      return
    }
    address.value = addressRes.data.result.address_component.street
  } catch (e) {
    console.error('定位错误:', e)
    address.value = '定位失败'
  }
}

// 选择位置
const chooseLocation = async () => {
  try {
    const [error, res] = await uni.chooseLocation()
    if (error) {
      console.error('选择位置失败:', error)
      return
    }
    address.value = res.name || res.address
  } catch (e) {
    console.error('选择位置错误:', e)
  }
}

// 页面加载时获取位置
onMounted(() => {
  getLocation()
})
</script>

<style>
.location {
  background: #fff;
  padding: 20rpx;
}
.location-info {
  display: flex;
  align-items: center;
}
.icon {
  font-size: 32rpx;
  margin-right: 10rpx;
}
.address {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.icon-right {
  font-size: 24rpx;
  color: #999;
}
</style> 